<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style>
        ul li {
            list-style: none;
            float: left;
            margin-left: 30px;
        }

        .d{
            width: 300px;
            height: 200px;
            clear: left;
            margin-left: 30px;
            margin-top: 30px;
            position: absolute;
        }

        .d1{
            background-color: deeppink;
            position: absolute;
        }

        .d2{
            background-color: lightgreen;
            display: none;
            position: absolute;
        }

        .d3{
            background-color: mediumblue;
            display: none;
            position: absolute;
        }

    </style>
</head>
<body>
<ul>
    <li  id="d1" style="color: black">tab1</li>
    <li id="d2" style="color: black">tab2</li>
    <li id="d3" style="color: black">tab3</li>
</ul>
<div class="d d1"></div>
<div class="d d2"></div>
<div class="d d3"></div>
</body>
</html>
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../validate/jquery.validate.min.js"></script>
<script src="../validate/messages_zh.js"></script>
<script>
    $("li").click(function() {
        let index = $(this).index();
        let col=$("div").eq(index).css("background-color")
        console.log(index)
        $("div").hide()
        $("div").eq(index).show();
    })
</script>